<template>
  <div class="start-inspection-container">
    <div class="header" header="详情">
      <a-button class="back-button" @click="gotoBack"> 返回 </a-button>
    </div>
    <div class="main" v-loading="pageLoading">
      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" :show-arrow="false">
          <template slot="header">
            <div @click.stop class="customize-text" header="基本信息"></div>
          </template>
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("1") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('1') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="unit-container">
            <a-form-model ref="form" :model="resultData">
              <a-row :gutter="0">
                <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
                  <a-form-model-item label="单位工程">
                    <a-input v-model="resultData.unitWorks" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="[30, 0]">
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">分部工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="resultData.divisionalWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="resultData.divisionalWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  resultData.divisionalWorksNumber,
                                  resultData.divisionalWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col
                  v-if="resultData.subDivisionalWorksNumber > 0"
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="12"
                  :xl="12"
                  :xxl="12"
                >
                  <div class="unit-item">
                    <div class="subtitle" header="●">子分部工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="resultData.subDivisionalWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="resultData.subDivisionalWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  resultData.subDivisionalWorksNumber,
                                  resultData.subDivisionalWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">分项工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="resultData.itemWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="resultData.itemWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  resultData.itemWorksNumber,
                                  resultData.itemWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col
                  v-if="resultData.subItemWorksNumber > 0"
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="12"
                  :xl="12"
                  :xxl="12"
                >
                  <div class="unit-item">
                    <div class="subtitle" header="●">子分项工程</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="resultData.subItemWorksRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="resultData.subItemWorksComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  resultData.subItemWorksNumber,
                                  resultData.subItemWorksComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="unit-item">
                    <div class="subtitle" header="●">工序</div>
                    <div class="content">
                      <a-row :gutter="0">
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                          class="percent"
                        >
                          <a-form-model-item label="报验进度">
                            <a-input
                              v-model="resultData.procedureItemRatio"
                              disabled
                            />
                          </a-form-model-item>
                          <span style="margin-left: 10px">%</span>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="已完成">
                            <a-input
                              v-model="resultData.procedureItemComplete"
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                        <a-col
                          :xs="24"
                          :sm="24"
                          :md="24"
                          :lg="24"
                          :xl="24"
                          :xxl="8"
                        >
                          <a-form-model-item label="未完成">
                            <a-input
                              :value="
                                subNumber(
                                  resultData.procedureItemNumber,
                                  resultData.procedureItemComplete
                                )
                              "
                              disabled
                            />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="2" :show-arrow="false">
          <template slot="header">
            <div @click.stop class="customize-text" header="工程信息">
              <div class="left"></div>
              <div class="right">
                <a-button type="primary" @click="gotoOneKeyInspection()">
                  一键报验
                </a-button>
                <a-button class="back-button" @click="gotoBack()">
                  取消报验
                </a-button>
              </div>
            </div>
          </template>
          <template slot="extra">
            <div class="customize-extra">
              {{ activeKey.includes("2") ? "收起" : "展开" }}
              <div class="icon" :class="[activeKey.includes('2') && 'active']">
                <bj-icon-font
                  type="xl"
                  color="#0068B7"
                  :size="10"
                ></bj-icon-font>
              </div>
            </div>
          </template>
          <div class="engineering-container">
            <div class="content">
              <div class="tree-container" v-loading="treeLoading">
                <a-empty v-if="treeData.length == 0" />
                <a-tree
                  show-icon
                  :default-expand-all="true"
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="autoExpandParent"
                  :selected-keys="selectedKeys"
                  :tree-data="treeData"
                  :replaceFields="{
                    children: 'child',
                    title: 'name',
                    key: 'code',
                  }"
                  @expand="onExpand"
                  @select="onSelect"
                >
                  <template
                    slot="title"
                    slot-scope="{ name, complete, total, child }"
                  >
                    <span
                      v-if="child"
                      :title="
                        name + '(' + (complete || 0) + '/' + (total || 0) + ')'
                      "
                    >
                      {{ name }} ({{ complete || 0 }}/{{ total || 0 }})
                    </span>
                    <span :title="name" v-else>{{ name }}</span>
                  </template>
                  <template slot="custom" slot-scope="{ child }">
                    <img
                      class="menu-icon"
                      src="@/assets/images/folder.png"
                      v-if="child"
                    />
                    <img
                      v-else
                      class="menu-icon"
                      src="@/assets/images/file.png"
                    />
                  </template>
                </a-tree>
              </div>
              <div class="table-container">
                <div class="list" v-loading="tableLoading">
                  <vxe-table
                    ref="xTable"
                    height="99%"
                    class="scrollbarStyle"
                    align="center"
                    show-overflow
                    show-header-overflow
                    :data="tableData"
                    :column-config="{ resizable: true }"
                    @checkbox-all="onSelectAll"
                    @checkbox-change="onSelectrow"
                  >
                    <vxe-column type="checkbox" width="60"></vxe-column>
                    <vxe-column type="seq" width="80" title="序号"></vxe-column>
                    <vxe-column field="divisionalWorks" title="分部工程">
                    </vxe-column>
                    <vxe-column field="subDivisionalWorks" title="子分部工程">
                    </vxe-column>
                    <vxe-column field="itemWorks" title="分项工程">
                    </vxe-column>
                    <vxe-column field="subItemWorks" title="子分项工程">
                    </vxe-column>
                    <vxe-column field="procedureItem" title="工序">
                    </vxe-column>
                  </vxe-table>
                </div>
                <!-- 分页 -->
                <div class="pager-container">
                  <vxe-pager
                    background
                    :current-page.sync="pager.page"
                    :page-size.sync="pager.pageSize"
                    :total="pager.total"
                    :layouts="[
                      'PrevPage',
                      'JumpNumber',
                      'NextPage',
                      'Sizes',
                      'FullJump',
                    ]"
                    @page-change="paginationChange"
                  >
                    <template #left>
                      <div class="vxe-pager-left-tip-container">
                        第<span>1</span>到<span
                          >{{
                            Math.ceil(pager.total / pager.pageSize) || 1
                          }}页 </span
                        >共<span>{{ pager.total }}</span
                        >条记录
                      </div>
                    </template>
                  </vxe-pager>
                </div>
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
//开始报验
import { addAttributeByKey } from "@/utils";
import {
  getUnitWordDetail,
  getGCXXTreeData,
  getGXBYList,
} from "@/api/wisdom-beam/quality-app";
export default {
  data() {
    return {
      activeKey: ["1", "2"],
      //单位工程信息
      pageLoading: false,
      resultData: {},
      //工程树
      treeLoading: false,
      treeData: [],
      selectedKeys: [],
      selectedCode: "",
      expandedKeys: [],
      autoExpandParent: true,
      //列表
      tableLoading: false,
      tableData: [],
      selectedRowKeys: [],
      //分页
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    subNumber(total = 0, complete = 0) {
      let unNumber = 0;
      unNumber = total - complete;
      if (unNumber <= 0) {
        unNumber = 0;
      }
      return unNumber;
    },
    //一键报验
    gotoOneKeyInspection() {
      let { orgCode, unitWorks } = this.$route.query;
      const records = this.$refs.xTable.getCheckboxRecords();
      sessionStorage.setItem("oneKeyInspection", JSON.stringify(records));
      this.$router.push({
        path: "/nebula/wisdom-beam-app/procedure/oneKeyInspection",
        query: {
          orgCode,
          orgName: this.resultData.orgName,
          unitWorks,
          inspectionStatus: records.length == 0 ? 0 : 1,
        },
      });
    },

    //用户手动选择/取消选择某列
    onSelectrow({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords();
      this.selectedRowKeys = records.map((item) => item.id);
    },

    //用户手动选择/取消选择所有列
    onSelectAll({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords();
      this.selectedRowKeys = records.map((item) => item.id);
    },

    //查询页面所有数据
    getData() {
      Promise.all([this.getDatail(), this.getTreeData(), this.getTableData()])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },

    //查询详情
    getDatail() {
      this.pageLoading = true;
      let { orgCode, unitWorks } = this.$route.query;
      return new Promise((resolve, reject) => {
        getUnitWordDetail({ orgCode, unitWorks })
          .then((res) => {
            let { data } = res;
            this.resultData = data?.result || {};
            resolve();
          })
          .catch((_) => {
            this.resultData = {};
            reject();
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },

    //查询工程信息树
    getTreeData() {
      this.treeLoading = true;
      let { orgCode, unitWorks } = this.$route.query;
      return new Promise((resolve, reject) => {
        getGCXXTreeData({
          orgCode,
          unitWorks,
          completeStatus: "",
          status: "",
        })
          .then((res) => {
            let { data } = res;
            this.treeData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              data?.result || [],
              "child"
            );
            resolve();
          })
          .catch((_) => {
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.treeLoading = false;
          });
      });
    },

    //查询列表
    getTableData() {
      this.tableLoading = true;
      let { orgCode, unitWorks } = this.$route.query;
      let { page, pageSize } = this.pager;
      let { selectedKeys, selectedCode } = this;
      return new Promise((resolve, reject) => {
        getGXBYList({
          page,
          pageSize,
          orgCode,
          unitWorks,
          code: selectedCode,
          id: selectedKeys.toString(),
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.tableLoading = false;
          });
      });
    },

    //树展开事件
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //树选择事件
    onSelect(selectedKeys, ev) {
      let { code } = ev.node.dataRef;
      this.selectedKeys = selectedKeys;
      if (selectedKeys.length == 0) this.selectedCode = "";
      else this.selectedCode = code;
      this.pager.page = 1;
      this.getTableData();
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //返回
    gotoBack() {
      let { orgCode, unitWorks } = this.$route.query;
      this.$router.push({
        path: "/nebula/wisdom-beam-app/procedure/detail",
        query: {
          orgCode,
          unitWorks,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.start-inspection-container {
  box-sizing: border-box;
  height: 100%;
  padding: 10px 0px 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    /deep/.ant-form-item {
      margin-bottom: 0;
      .flex();
      .ant-form-item-label {
        width: 120px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }

    .right {
      padding-right: 24px;
    }
    //单位工程信息
    .unit-container {
      padding: 0 40px 10px 30px;
      .unit-item {
        margin: 16px 0px 0 0;
        .subtitle {
          margin-bottom: 8px;
          font-weight: 400;
          color: var(--primary-color);
          font-size: 16px;
          &::before {
            content: attr(header);
            margin-right: 10px;
          }
        }
        .content {
          box-sizing: border-box;
          padding: 10px 40px 10px 0px;
          background: #f6f9ff;
          .percent {
            .flex();
            align-items: center;
          }
        }
      }
    }
    //工程信息
    .engineering-container {
      height: 600px;
      box-sizing: border-box;
      .flex();
      flex-direction: column;
      .operate {
        padding: 0 30px;
        margin-bottom: 14px;
        .flex();
        justify-content: space-between;
        align-items: center;
        /deep/.ant-input {
          margin-right: 10px;
          width: 160px;
        }
        /deep/.ant-select {
          margin-right: 10px;
          .ant-select-selection {
            &.ant-select-selection--single {
              width: 160px;
            }
            &.ant-select-selection--multiple {
              min-width: 160px;
            }
          }
        }
      }
      .content {
        flex: 1;
        .flex();
        overflow: hidden;
        .tree-container {
          box-sizing: border-box;
          padding: 0 20px 10px 20px;
          width: 344px;
          height: 100%;
          border-right: 2px solid #f3f4f6;
          .custom-scrollbar();
          overflow-x: hidden !important;
          /deep/.ant-tree {
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                width: calc(100% - 10px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
        .table-container {
          flex: 1;
          .flex();
          flex-direction: column;
          box-sizing: border-box;
          padding-left: 14px;
          .list {
            height: 100%;
            flex: 1;
          }
          .pager-container {
            flex-shrink: 0;
          }
        }
      }
    }
  }
}
</style>
